<template>
    <div>
        <h3 class="title">热销推荐</h3>
        <ul>
            <router-link 
                class="item border-bottom" 
                tag="li"
                v-for="item of recommendList" 
                :key="item.id"
                :to="'/detail/'+ item.id"
                >
                <div class="item-hesder">
                    <img class="item-img" :src="item.imgUrl" alt="">
                </div>
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                    <button class="item-btn">查看详情</button>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        recommendList:Array
    },
    name: 'HomeRecommend',
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.title
    height:.6rem
    line-height .6rem
    background: #f5f5f5
    padding-left: .2rem
.item
    overflow: hidden
    display:flex
    height: 1.7rem
    .item-img
        width: 1.7rem
        height: 1.7rem
        padding: .1rem
    .item-info
        padding: .1rem
        min-width:0
        .item-title
            line-height: .54rem
            font-size: .32rem
            ellipsis()
        .item-desc
            line-height: .44rem
            color: #999
            ellipsis()
        .item-btn
            width: 1.8rem
            line-height: .44rem
            margin-top: .1rem
            background: #ff9300
            color:#fff 
            border-radius: .1rem
</style>